<template>
	<public-view navType="order" navTitle="确认订单" topBgShow="4" :navRight="false" navColor="#ffffff">
		<view class="content">
			<view class="address-view flex a-i-c j-c-b" v-if="address_info.id" @click="goTo({url:'/pages/address/chooseAddress'})">
				<view class="left flex">
					<image class="icon" src="@/static/images/address-EE8300.svg" mode=""></image>
					<view class="address-text flex f-d-c">
						<view class="w-100 f-s-30 color-333 f-w-b l-h-44">
							{{address_info.province_text||""}}{{address_info.city_text||""}}{{address_info.area_text||""}}{{address_info.address_desc ||""}}
						</view>
						<view class="color-999 f-s-24 l-h-34">
							{{address_info.name||""}} {{address_info.mobile||""}}
						</view>
					</view>
				</view>
				<image class="next-ic" src="@/static/images/next-icon3.svg" mode=""></image>
			</view>
			<view class="address-view flex a-i-c j-c-b" v-else @click="goTo({url:'/pages/address/chooseAddress'})">
				<view class="left flex">
					<image class="icon" src="@/static/images/address-EE8300.svg" mode=""></image>
					<view class="address-text flex f-d-c">
						<view class="w-100 f-s-30 color-333 f-w-b l-h-44">
							请先选择地址，选择地址后计算订单价格
						</view>
					</view>
				</view>
				<image class="next-ic" src="@/static/images/next-icon3.svg" mode=""></image>
			</view>
			<block v-for="(item, index) in goods_info" :key="index">
				<view class="goods-info-box" v-if="order_type === 'good'">
					<view class="top-store-box flex a-i-c color-7a7a7a f-s-30">
						<image class="icon" src="@/static/images/my/gift-store999.svg" mode=""></image>
						{{item?.merchant?.name||""}}
					</view>
					<view class="goods-info-b w-100 flex j-c-b">
						<view class="left flex">
							<image class="image" :src="goods_order_info?.sku_products?.image" mode=""></image>
							<view class="flex f-d-c" style="width: 320rpx;">
								<view class="f-s-26 color-333 l-h-36">
									{{item.name}}
								</view>
								<view class="color-999 f-s-22">
									<view class="" style="margin: 5rpx 0;" v-for="(itm, idx) in goods_order_info?.sku_products?.item||[]" :key="idx">
										规格{{itm.name||""}}
									</view>
									<view class="">
										数量：{{goods_order_info?.data?.num||0}}份
									</view>
								</view>
							</view>
						</view>
						<view class="f-s-32 color-333">
							<text class="f-s-22">￥</text>{{getGoodsMoney(goods_order_info?.data?.num,goods_order_info.sku_products.price)||0}}
						</view>
					</view>
				</view>
				<block v-else>
					<view class="goods-info-box">
						<view class="top-store-box flex a-i-c color-7a7a7a f-s-30">
							<image class="icon" src="@/static/images/my/gift-store999.svg" mode=""></image>
							{{item?.merchant?.name||""}}
						</view>
						<block v-for="(itm, idx) in item.goods" :key="idx">
							<view class="goods-info-b w-100 flex j-c-b">
								<view class="left flex">
									<image class="image" :src="itm.goods_sku_product?.image" mode=""></image>
									<view class="flex f-d-c" style="width: 320rpx;">
										<view class="f-s-26 color-333 l-h-36">
											{{itm.name}}
										</view>
										<view class="color-999 f-s-22">
											<view class="" style="margin: 5rpx 0;" v-for="(itms, idxs) in itm?.source_data?.goods_sku_product?.item||[]" :key="idxs">
												规格:{{itms.name||""}}
											</view>
											<view class="">
												数量：{{itm.num||0}}份
											</view>
										</view>
									</view>
								</view>
								<view class="f-s-32 color-333">
									<text class="f-s-22">￥</text>{{getGoodsMoney(itm.num,itm.goods_sku_product.price)}}
								</view>
							</view>
						</block>
					</view>
				</block>
			</block>
			<view class="mask-view flex a-i-c">
				<view class="color-333 f-w-b f-s-30">
					运费
				</view>
				<view class="f-s-28 color-999" style="width: 538rpx;margin-left: 24rpx;">
					￥{{count_info.post_amount||0}}
				</view>
			</view>
			<view class="mask-view flex a-i-c">
				<view class="color-333 f-w-b f-s-30">
					备注
				</view>
				<input class="f-s-28" v-model="remark" style="width: 538rpx;margin-left: 24rpx;" placeholder="请输入您的备注"
					placeholder-style="color: #c1c1cc;" />
			</view>
			<view class="pay-way-box w-100 flex f-d-c">
				<radio-group class="uni-list" @change="radioChange">
					<label class="flex a-i-c w-100 j-c-b" style="margin-bottom: 42rpx;" v-for="(item,index) in pay_way" :key="index">
						<view class="flex a-i-c color-333 f-s-28">
							<image class="pay-way-icon" :src="item.icon" mode=""></image>
							<label class="label-2-text" :for="item.value">
								<text>{{item.name}}</text>
							</label>
						</view>
						<view>
							<radio  :value="item.type" :checked="item.checked"></radio>
						</view>
					</label>
				</radio-group>
			</view>
			<view class="" style="height: 200rpx;">
				
			</view>
			<view class="bottom-submit-order-view flex a-i-c j-c-b">
				<view class="left flex">
					<view class="">
						<text class="f-s-24 color-333">合计：￥</text>
						<text class="f-s-40 color-F32E2E f-w-b">{{count_info.amount}}</text>
					</view>
				</view>
				<view class="right all-center color-fff f-s-26" @click="submitOrder">
					提交订单
				</view>
			</view>
			<pay-password ref="showpay" @enter="successPayPassword" @close="closePayPassword"></pay-password>
		</view>
	</public-view>
</template>

<script>
	import {goTo,reditTo} from "@/nav.js"
	import payPassword from "@/components/myComponents/paypassword.vue"
	export default {
		components:{
			"pay-password":payPassword
		},
		data() {
			return {
				pay_way: [
					{
						name:"微信支付",
						icon:"/static/images/pay-way/weixin-icon.svg",
						value:'1',
						checked:false,
						type:"wechat",
						valuea:0
					},
					{
						name:"支付宝支付",
						icon:"/static/images/pay-way/alipay-icon.svg",
						value:'2',
						checked:false,
						type:"alipay",
						valuea:0
					},
					{
						name:"余额支付",
						icon:"/static/images/pay-way/yue.svg",
						value:'3',
						checked:false,
						type:"balance",
						valuea:0
					}
				],
				address_info:{id:""},
				goods_order_info:null,
				goods_info:[],
				count_info:{},
				pay_type:"",
				remark:"",
				order_type:"good",
				isPost:"",
				pay_pass:"",
				is_pay:false
			};
		},
		onLoad(e) {
			if(e.type){
				this.order_type = e.type
			}
			this.$store.state.pay_type_list.map(val=>{
				this.pay_way.forEach(value=>{
					if(val.type === value.type){
						value.valuea = val.value||0
						value.type = val.type,
						value.name = val.name
						value.checked = false
					}
				})
			})
			// this.pay_way = this.$store.state.pay_type_list
			if(this.order_type ==='good'){
				this.goods_order_info = this.$store.state.shop_order
				this.goods_info = [this.goods_order_info.goods_info]
			}else{
				this.goods_info = this.$store.state.car_goods
			}
			console.log(this.goods_order_info,"goods_order_info")
		},
		computed:{
			goods_money(){
				return (this.goods_order_info?.data?.num||0*Number(this.goods_info[0].price||0)).toFixed(2)
			}
		},
		onShow() {
			console.log(this.is_pay,"this.is_pay")
			if(!this.is_pay){
				console.log(this.$store.state.order_address,"console.log(this.$store.state.car_goods)")
				if(this.$store.state.order_address.id){
					this.address_info = this.$store.state.order_address
					this.getOrderInfo()
				}else{
					this.$getDefaultAddress((res)=>{
						this.address_info = res.data ||{id:""}
						this.getOrderInfo()
						console.log(this.address_info)
					})
				}
			}
		},
		methods:{
			goTo,reditTo,
			closePayPassword(){
				this.isPost = ""
			},
			getGoodsMoney(num = 0,price = 0){
				console.log(num,price,"goodsorderinfo.num")
				return (num*Number(price)).toFixed(2)
			},
			successPayPassword(e){
				this.pay_pass = e
				this.isPost = ""
				this.submitOrder(this,true)
				
			},
			submitOrder(e,isPassWord=false){
				let that = this
				if(that.pay_type === ''){
					uni.showToast({
						title:"请选择支付方式",
						icon:"none"
					})
					return
				}
				if(that.isPost !==''){
					return
				}
				that.isPost = "1"
				if(that.pay_type === "balance" && !isPassWord){
					if(that.$store.state.userInfo.pay_pass){
						that.$refs.showpay.show()
					}else{
						uni.showModal({
							title:"温馨提示",
							content:"您未设置支付密码",
							confirmText:"去设置",
							success(res){
								if(res.confirm){
									that.goTo({url:"/pages/my/changePayPassword"})
								}
							}
						})
					}
					return
				}
				uni.showLoading({
					title:"订单创建中..."
				})
				that.getOrderInfo("POST")
				
			},
			radioChange(e){
				this.pay_type = e.detail.value
			},
			getOrderInfo(isPost="GET"){
				let that = this
				let data = {}
				if(that.order_type === 'good'){
					data = {
						type:"2",
						method:isPost,
						data:{
							...that.goods_order_info.data,
							address_id:that.address_info.id,
							remarks:that.remark||""
						} 
					}
				}else{
					let remark_data = that.$store.state.car_data.car_arr
					let arr = Object.keys(that.$store.state.car_data.car_arr).length
					if(arr>1){
						Object.keys(remark_data).map(val=>{
							remark_data[val] = that.remark
						})
					}
					data = {
						type:"2",
						method:isPost,
						data:{
							cart_ids:that.$store.state.car_data.arr,
							remarks:arr<=1?that.remark:remark_data,
							address_id:that.address_info.id,
						}
					}
				}
				that.util.postRequest({
					url:"v1/order/create",
					data
				}).then(res=>{
					if(isPost === 'GET'){
						that.count_info = res.data
					}else{
						uni.hideLoading()
						this.isPost = ""
						let order_data = []
						Object.keys(res.data).map(val=>{
							order_data.push(res.data[val].id)
						})
						that.$createPay({
							pay_type:that.pay_type,
							pay_pass:that.pay_pass,
							order_ids:order_data,
							method:isPost
						},(bres=>{
							that.is_pay = false
							let timeout = setTimeout(()=>{
								clearTimeout(timeout)
								if(bres){
									if(order_data.length<=1){
										that.reditTo({url:'/pages/order/orderInfo?id='+order_data[0]})
									}else{
										that.reditTo({url:'/pages/my/myOrderList'})
									}
								}else{
									that.reditTo({url:'/pages/my/myOrderList'})
								}
								
							},1500)
						}))
						// that.goTo({url:'/pages/order/orderInfo'})
					}
				}).catch(e=>{
					uni.hideLoading()
					uni.showToast({
						title:e.msg||"请求失败",
						icon:"none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-submit-order-view{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		padding: 16upx 20upx 62upx;
		z-index: 3;
		.right{
			width: 266upx;
			height: 70upx;
			background: #ee8300;
			border-radius: 34upx;
		}
		.left{
			padding-left: 40upx;
		}
	}
	.pay-way-box {
		width: 100%;
		padding: 32upx 20upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		margin-top: 20upx;
		.pay-way-icon{
			width: 48upx;
			height: 48upx;
			margin-right: 22upx;
		}
	}

	.mask-view {
		width: 100%;
		padding: 32upx 20upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
	}

	.goods-info-box {
		width: 100%;
		padding: 32upx 20upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		margin-bottom: 20upx;

		.goods-info-b {
			.left {
				.image {
					width: 130upx;
					height: 130upx;
					margin-right: 30upx;
				}
			}
		}

		.top-store-box {
			width: 100%;
			margin-bottom: 16upx;

			.icon {
				width: 40upx;
				height: 40upx;
				margin-right: 16upx;
			}
		}
	}

	.address-view {
		width: 100%;
		padding: 32upx 20upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		margin-bottom: 20upx;

		.next-ic {
			width: 48upx;
			height: 48upx;
		}

		.left {
			.address-text {
				width: 490upx;
			}

			.icon {
				width: 40upx;
				height: 40upx;
				margin-right: 16upx;
			}
		}
	}

	.content {
		width: 100%;
		padding: 32upx 30upx;
	}
</style>